<template>
	<div class="main_div">
		<div class="info_div">
			<div>
				<img class="img_cls" src="../assets/header.png">
			</div>
			<div>
				<table class="table_cls">
					<tr>
						<td>账号</td>
						<td><el-input v-model="form.username" placeholder="请输入账号"></el-input></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><el-input show-password v-model="form.password" placeholder="请输入密码"></el-input></td>
					</tr>
				</table>
			</div>
			<div style="margin: 10px;">
				<el-button type="primary" class="login_btn" @click="login">登录</el-button>
			</div>
			<div class="botton_div">
				<span @click="goPage('/FindPassword')">忘记密码?</span>
				<span @click="goPage('/Register')">注册新用户</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			goPage(url) {
				this.$router.push(url);
			},
			//登录
			login(){
				
				this.$.ajax({
					type: "POST",
					url: "/user/login",
					data: this.form,
					success: (data) => {
						//登录成功
						//保存jwt令牌
						window.localStorage.setItem("jwtToken", data);
						
						this.$message({
							message: "登录成功！",
							type: "success"
						})
						
						//跳转到首页
						this.$router.push("/Index");
					}
				});
				
				// this.axios({
				// 	method: "POST",
				// 	data: this.form,
				// 	url: this.$.host + "/user/login"
				// }).then((result) => {
				// 	//获取后端的数据
				// 	var r = result.data;
					
				// 	if(r.code == 200) {
				// 		//登录成功
				// 		//保存jwt令牌
				// 		window.localStorage.setItem("jwtToken", r.data);
						
				// 		this.$message({
				// 			message: "登录成功！",
				// 			type: "success"
				// 		})
						
				// 		//跳转到首页
				// 		this.$router.push("/Index");
						
				// 	} else {
				// 		this.$message({
				// 			message: r.msg,
				// 			type: "error"
				// 		})
				// 	}
				// })
			}
		},
		mounted(){
			//验证当前是否登录
			var user = this.$.getUser();
			if(user){
				//说明已经登录了
				this.$router.push("/Index");
			}
		}
	}
</script>

<style>
	.main_div {
		width: 100%;
		height: 100%;
		background-color: cadetblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.info_div {
		width: 400px;
		height: 300px;
		background-color: aliceblue;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	.img_cls {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin-top: -60px;
		background-color: white;
	}
	
	.table_cls tr td {
		padding: 10px 10px;
	}
	
	.login_btn {
		width: 200px;
	}
	
	.botton_div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		color: gray;
		font-weight: 900;
		margin-top: 10px;
	}
</style>